{% extends "layout.html" %}

{% block head %}
<title>{{ _(config["WEBSITE_NAME"]) }}</title>
<meta name="description" content="{{ _('The official uruk project wiki') }}">
<meta name="robots" content="index">
<style type="text/css">
	aside ul li, aside ul h4 {
  		margin-top: 5px !important;
	}
	@media only screen and (max-width: 768px) {
		.fixed {
    		position: static;
  		}
  		.sticky {
			{% if session["direction"] == "rtl" %}
				float: right !important;
  				padding-right: 0px;
				padding-left: 0px;
  			{% else %}
  				float: left !important;
  			{% endif %}
  		}
  		#page-content {
			{% if session["direction"] == "rtl" %}
    			float: right !important;
    			padding-right: 10px;
				padding-left: 0px;
    			width: 78% !important;
    		{% else %}
    			float: left !important;
    			margin-right: -14px;
    		{% endif %}
  		}
  		#content {
  			float: none !important;
  		}
	}
</style>
{% endblock %} 

{% block body %}
<div class="row">
	<div class="container-fluid">
		{% include "wiki/search_bar.html" %}
		{% include "wiki/aside.html" %}
		{{ toolbar(edit=False, delete=False, add=True) }}
		{% if session["direction"] == "rtl" %}
			<section id="content" class="pull-right col-sm-10">
		{% else %}
			<section id="content" class="pull-left col-sm-10">
		{% endif %}
	    {% if get_flashed_messages() %}
	      {% for message in get_flashed_messages() %}
	          {% if message == "SignUpSuccess" %}
			      <div class="alert alert-success" style="margin-top: 10px !important;">
		              <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
			          <strong>{{ _("Sign Up Succeeded!") }}</strong> {{ _("Please login in to access to your account.") }}
		    	  </div>            
	          {% elif message == "QueuePost" %}
	              <div class="alert alert-warning" style="margin-top: 10px !important;">
	                  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
	                  <strong>{{ _("Your post has been scheduled successfully!") }}</strong> {{ _("Please wait until one of the admins review it.") }}
	              </div>
	          {% endif %}
	      {% endfor %}
	    {% endif %}
		{% if frontpage %}
			<div class="row">{{ content|safe }}</div>
		{% else %}
			<div class="row">
				{% if len(query) >= 4 %}
					{% for el in range(4) %}
						{% if session["direction"] == "rtl" %}
							<div class="pull-right col-sm-5 col-xs-12">
						{% else %}
							<div class="pull-left col-sm-5 col-xs-12">
						{% endif %}	
							<h2 style="margin-left: 20px; margin-bottom: 10px !important"><a href="{{ url_for('wiki.post', post=query[el].url) }}">{{ query[el].address }}</a></h2>
							{% if session["direction"] == "rtl" %}
								{% if len(sub("<.*?>", " ", query[el].content)) <= 100 %}
									<p style="margin-right: 40px;">{{ sub("<.*?>", " ", query[el].content) }}</p>
								{% else %}
									<p style="margin-right: 40px;">{{ sub("<.*?>", " ", query[el].content)[:100] }}...</p>
								{% endif %}
							{% else %}
								{% if len(sub("<.*?>", " ", query[el].content)) <= 100 %}
									<p style="margin-left: 40px;">{{ sub("<.*?>", " ", query[el].content) }}</p>
								{% else %}
									<p style="margin-left: 40px;">{{ sub("<.*?>", " ", query[el].content)[:100] }}...</p>
								{% endif %}
							{% endif %}
							</p>
						</div>
					{% endfor %}
				{% else %}
					{% for el in query %}
						{% if session["direction"] == "rtl" %}
							<div class="pull-right col-sm-5 col-xs-12">
						{% else %}
							<div class="pull-left col-sm-5 col-xs-12">
						{% endif %}	
							<h2 style="margin-left: 20px; margin-bottom: 10px !important"><a href="{{ url_for('wiki.post', post=el.url) }}">{{ el.address }}</a></h2>
							{% if session["direction"] == "rtl" %}
								{% if len(sub("<.*?>", " ", el.content)) <= 100 %}
									<p style="margin-right: 40px;">{{ sub("<.*?>", " ", el.content) }}</p>
								{% else %}
									<p style="margin-right: 40px;">{{ sub("<.*?>", " ", el.content)[:100] }}...</p>
								{% endif %}
							{% else %}
								{% if len(sub("<.*?>", " ", el.content)) <= 100 %}
									<p style="margin-left: 40px;">{{ sub("<.*?>", " ", el.content) }}</p>
								{% else %}
									<p style="margin-left: 40px;">{{ sub("<.*?>", " ", el.content)[:100] }}...</p>
								{% endif %}
							{% endif %}
							</p>
						</div>
					{% endfor %}	
				{% endif %}	
			</div>
		{% endif %}
	</div>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
	var offset = $(".sticky").offset();
	$(window).scroll(function(e) {
	  	if(window.scrollY >= offset.top) { 
	  		$(".sticky").addClass("fixed");
			{% if session["direction"] == "rtl" %}
	  			document.getElementById("content").setAttribute("class", "pull-left col-sm-10")
	  		{% else %}
	  			document.getElementById("content").setAttribute("class", "pull-right col-sm-10")
	  		{% endif %}	
	  	} else {
	      	$(".sticky").removeClass("fixed");
			{% if session["direction"] == "rtl" %}
	  			document.getElementById("content").setAttribute("class", "pull-right col-sm-10")
	  		{% else %}
	  			document.getElementById("content").setAttribute("class", "pull-left col-sm-10")
	  		{% endif %} 		
	  	}
	});
</script>
{% endblock %}